<template>
  <div class="essentialInformation">
    <div class="fristInformation">
      <el-form :model="form" v-loading="loading" :rules="rules" ref="member-form" label-position="right" label-width="80px" class="member-form">
        <h3>基本信息</h3>
        <section>
          <el-form-item label="权限">
            <el-tag type="success">{{ userType }}</el-tag>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="studentId">
            <el-input v-model="form.studentId" :disabled="editMode" placeholder="请输入学号" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="className">
            <el-input v-model="form.className" placeholder="请输入班级" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="年级" prop="grade">
            <el-input v-model="form.grade" placeholder="请输入年级" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model.number="form.gender">
              <el-radio :label="1" border>男生</el-radio>
              <el-radio :label="2" border>女生</el-radio>
            </el-radio-group>
          </el-form-item>
        </section>
        <h3>联系方式</h3>
        <section>
          <el-form-item label="微信号码" prop="wechat">
            <el-input v-model="form.wechat" placeholder="请输入微信号码" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱" prop="email">
            <el-input placeholder="请输入联系邮箱" v-model="form.email" class="inputLength">
            </el-input>
          </el-form-item>
          <el-form-item label="QQ号码" prop="qq">
            <el-input v-model="form.qq" placeholder="请输入QQ号码" class="inputLength"></el-input>
          </el-form-item>
        </section>
        <h3>其他信息</h3>
        <section>
          <el-form-item label="籍贯" prop="nativePlace">
            <el-input v-model="form.nativePlace" placeholder="请输入籍贯" class="inputLength"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="identity">
            <el-input v-model="form.identity" placeholder="身份证号 用于比赛报名等用途" class="inputLength"></el-input>
          </el-form-item>
          <!-- <el-form-item label="权限" prop="Jurisdiction">
                    <el-input v-model="form.Jurisdiction" placeholder="请输入权限" class="inputLength"></el-input>
                </el-form-item> -->

          <el-form-item label="主攻方向 " prop="major">
            <el-autocomplete v-model="form.major " :fetch-suggestions="autoMajor" class="inputLength" placeholder="填写或选择你的主攻方向"></el-autocomplete>
          </el-form-item>

          <el-form-item label="个人博客" prop="blogUrl">
            <el-input placeholder="请输入博客地址" v-model="form.blogUrl" class="inputLength">
            </el-input>
          </el-form-item>
        </section>

        <el-form-item label="">
          <el-button style="margin: 0 auto;" type="primary" @click="handleSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import { REQUEST_STATUS, USER_TYPE } from "@/utils/constants.js";

export default {
  props: {
    data: {
      type: Object,
      default: null
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      editMode: false,
      centerDialogVisible2: false,
      form: {
        name: "",
        studentId: "",
        className: "",
        grade: "",
        nativePlace: "",
        gender: 0,
        major: "",
        level: "",
        identity: "",
        phoneNumber: "",
        wechat: "",
        qq: "",
        blogUrl: "",
        email: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "名字长度在 3 到 5 个字符", trigger: "blur" }
        ],
        studentId: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 10, max: 10, message: "学号长度在10个字符", trigger: "blur" }
        ],
        className: [
          { required: true, message: "请输入班级", trigger: "blur" },
          { min: 6, max: 10, message: "班级长度在 6 到 10 个字符", trigger: "blur" }
        ],
        grade: [
          { required: true, message: "请输入年级", trigger: "blur" },
          { length: 4, message: "请输入正确的年份", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "请选择性别", trigger: "blur" },
          { type: "number", min: 1, max: 3, message: "选择性别", trigger: "blur" }
        ],

        // Jurisdiction: [
        //     { required: true, message: "请输入权限", trigger: "blur" },
        //     { min: 4, max: 10, message: "权限长度在 4 到 10个字符", trigger: "blur" }
        // ],
        nativePlace: [
          { message: "请输入籍贯", trigger: "blur" },
          { min: 2, max: 20, message: "籍贯长度在 6 到 20个字符", trigger: "blur" }
        ],
        studentDirection: [
          { required: true, message: "请输入选择方向", trigger: "blur" },
          { min: 4, max: 10, message: "籍贯长度在 4 到 10个字符", trigger: "blur" }
        ],
        blogUrl: [
          { message: "请输入博客地址", trigger: "blur" },
          { min: 6, max: 100, message: "地址长度在 10 到 100个字符", trigger: "blur" }
        ],

        email: [
          { message: "请输入联系邮箱", trigger: "blur" },
          { min: 10, max: 50, message: "联系邮箱长度在10~50位", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "手机号码长度在11个字符", trigger: "blur" }
        ],
        wechat: [
          { required: true, message: "请输入微信账号", trigger: "blur" },
          { min: 5, max: 20, message: "微信账号长度在 5 到 20个字符", trigger: "blur" }
        ],
        qq: [
          { message: "请输入QQ号码", trigger: "blur" },
          { min: 9, max: 10, message: "QQ号码长度在 9 到 10个字符", trigger: "blur" }
        ],
      }
    };
  },
  computed: {
    userType() {
      const level = this.form.level;
      let title = "";
      switch (level) {
        case USER_TYPE.REGULAR_USER:
          title = "普通群众";
          break;
        case USER_TYPE.ADMIN:
          title = "管理员";
          break;
        case USER_TYPE.SUPER_ADMIN:
          title = "超级管理员";
          break;
        default:
          title = "你是什么东西???";
          break;
      }
      return title;
    }
  },
  mounted() {
    this.updateFormData();
  },
  watch: {
    "$route"(to) {
      this.updateFormData();
    },
    // form: {
    //     deep: true,
    //     handler: function (val) {
    //         storage.set(this.name, val);
    //     }
    // }
  },

  methods: {
    autoMajor(qs, cb) {
      cb([
        { value: "Web开发" },
        { value: "移动应用开发" },
        { value: "物联网开发" },
        { value: "桌面软件开发" },
        { value: "嵌入式开发" },
        { value: "算法竞赛" },
        { value: "后台开发" }
      ]);
    },
    async updateFormData() {
      if (this.$route.path.indexOf("edit/") === -1 && !this.id) {
        return;
      }
      const studentId = this.$route.params.id || this.id || "";

      this.loading = true;
      this.$refs["member-form"].$el.style = "";
      try {
        const { data } = await api.getMember({
          studentId
        });
        this.form = data.data;
        this.editMode = true;
      } catch (error) {
        this.$refs["member-form"].resetFields();
        this.$message.error("无权进行此操作");
        this.$refs["member-form"].$el.style = "filter: blur(4px); pointer-events: none;";
      }
      this.loading = false;
    },
    async handleSubmit() {
      this.loading = true;
      let result = true;
      this.$refs["member-form"].validate(valid => result = valid);
      if (result) {
        try {
          let form = Object.assign({}, this.form);
          delete form.level;
          console.log(form)
          await api.updateMember({
            ...form
          });
          this.$message.success("操作成功");
          this.$emit("submit");
        } catch (error) {
        }
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
h3 {
  box-sizing: border-box;
  margin: 0 auto 25px;
  padding: 0 0 8px 0;
  width: 94%;
  text-align: left;
  color: #909399;
  border-bottom: 1px dotted #c0c4cc;
}
label.el-form-item__label {
  padding: 0;
}
.member-form {
  section {
    box-sizing: border-box;
    padding: 0 25px;
  }
}

.essentialInformation {
  padding-bottom: 25px;
  .el-form-item {
    font-weight: bold;
    margin-left: 8px;
    padding: 0;
    text-align: left;
  }
}
// .essentialInformation .httpAddress {
// }
.essentialInformation .el-select {
  margin-left: 10px;
}
// .essentialInformation {
//   .el-autocomplete,
//   .el-input {
//     margin-left: 10px;
//   }
// }

.essentialInformation .el-radio {
  margin-left: 10px;
  margin-right: 15px;
}

.essentialInformation .el-button {
  width: 120px;
}
#fristHeader {
  width: 100%;
  height: 350px;
}

.essentialInformation .inputLength {
  width: 370px;
}

.essentialInformation {
  margin: 0 auto;
}

.fristInformation {
  margin: 0px auto;
}

#information {
  height: 26px;
  opacity: 0.8;
  font-size: 15px;
  color: #3b3b3b;
  text-align: left;
  font-weight: bold;
  letter-spacing: 2px;
  border-bottom: 1px dashed #b3b3b3;
}
</style>